<template>
	<header class="header">
	    <!-- 导航主体 -->
	    <nav class="header-nav">
	        <div class="navs">
	            <div class="nav-item">
	                <div class="nav-box"><a class="nav-a cycle_switch" style="font-size:18px;font-weight:bold;" href="/">逸曦穆泽</a></div>
				</div>
				<div class="nav-item nav-normal">
				    <div class="nav-box mb-nav" >
						<a class="nav-a mb-nav-a" v-for="(item,index) in navList" :key="index" :href="item.url" :class="activeIndex == index?'nav-active':''">{{item.name}}</a>
				    </div>
				</div>
	            <div class="nav-item nav-moblie">
<!-- 	                <div class="mb-nav-box mb-menu-btns" @click="navmenuswitch" v-bind:class="{'mb-menu-close':!mbmenubtn,'mb-menu-open':mbmenubtn}">
 -->					<div class="mb-nav-box mb-menu-btns" @click="navmenuswitch" :class="mbmenubtn?'mb-menu-open':'mb-menu-close'">
						<span class="mb-menu-btn">
							<span class="mb-menu-top"></span>
							<span class="mb-menu-middle"></span>
							<span class="mb-menu-bottom"></span>
						</span>
	                </div>
	            </div>
	            <div class="nav-login-btns">
	                <a class="nav-login">登录</a> /
					<a class="nav-register">注册</a>
	            </div>
	        </div>
	    </nav>
		
		<!-- 移动导航下拉菜单 -->
		<div class="mb-mask-menu" v-bind:class="mbNav">
			<div class="nav-item">
				<div class="mb-nav">
					<a class="nav-a mb-nav-a" v-for="(item,index) in navList" :key="index" :href="item.url" :class="activeIndex == index?'nav-active':''" >{{item.name}}</a>
				</div>
			</div>
		</div>
	    <!-- 三维 -->
	    <div class="wrap">
	        <div class="cube">
	            <div class="cube-item before" style="background: url('/image/cube/1.jpg')no-repeat;background-size: cover;"><span class="picture">悟</span></div>
	            <div class="cube-item after" style="background: url('/image/cube/2.jpg')no-repeat;background-size: cover;"><span class="picture">行</span></div>
	            <div class="cube-item left" style="background: url('/image/cube/3.jpg')no-repeat;background-size: cover;"><span class="picture">觉</span></div>
	            <div class="cube-item right" style="background: url('/image/cube/4.jpg')no-repeat;background-size: cover;"><div class="picture">空</div></div>
	            <div class="cube-item top" style="background: url('/image/cube/5.jpg')no-repeat;background-size: cover;"><span class="picture">忧</span></div>
	            <div class="cube-item bottom" style="background: url('/image/cube/6.jpg')no-repeat;background-size: cover;"><span class="picture">性</span></div>
	        </div>
	    </div>
	</header>
</template>

<script>
	import { ref,reactive,toRefs } from 'vue'
	export default {
		setup() {
			let obj = reactive({
				mbmenubtn: false, // 移动菜单按钮
				mbNav: "mbNavClose",
			})
			const navList = ref([
				{name:'博客',url:"/blog"},
				{name:'生活',url:"/category/life"},
				{name:'学习',url:"/category/study"},
				{name:'旅行',url:"/category/travel"},
				{name:'思考',url:"/category/thinking"},
			])
			const navmenuswitch = (e)=>{
				obj.mbmenubtn = !obj.mbmenubtn;
				if(obj.mbmenubtn){
					obj.mbNav = "mbNavOpen";
				}else{
					obj.mbNav = "mbNavClose";
				}
			}
			let navArr = ["/blog","/category/life","/category/study","/category/travel","/category/thinking",];
			const activeIndex = navArr.indexOf(location.pathname);
			return {navList,...toRefs(obj),navmenuswitch,activeIndex}
		}
	}
</script>
<style>
	body,p{margin: 0;padding: 0;}
	/* 滚动条 */
	body::-webkit-scrollbar{width: 3px;height: 6px}
	body::-webkit-scrollbar-thumb {border-radius: 5px;background: #aaa;}
	body::-webkit-scrollbar-track {background: #ddd;}
	*, *::before, *::after {box-sizing: border-box;}
	a{text-decoration:none;}
	.cycle_switch{background: -webkit-linear-gradient(45deg, #0f77ea,#70f7fe 20%, #ff2525 40%, #ffe53b 60%, #ff5acd 80%, #bed5f5);
	    -webkit-text-fill-color: transparent;-webkit-background-clip: text;-webkit-background-size: 200% 100%;-webkit-animation: maskedanimation 2s infinite linear;
	}
	@-webkit-keyframes maskedanimation{ 0%{background-position:0 0} 100%{background-position:-100% 0} }
	
	/* 导航栏 */
	header{width:100%;position:-webkit-sticky;position:sticky;top:0;z-index:333;}
	.header-nav{width:100%;background-color:#f9f9f9;}
	.navs{display:flex;justify-content:space-between;min-width:270px;max-width:1200px;padding:0 22px;margin:0 auto;}
	.navs .nav-item{display:inline-block;height:60px;line-height:60px;}
	.navs .nav-normal{display:block;}
    .nav-item .nav-box{display:inline-block;white-space:nowrap;position: relative;}
	/* pc端 */
	.nav-a{display:inline-block;vertical-align: middle;color:#333;padding:0 10px;cursor:pointer;font-size:12px;text-decoration: none;}
	.nav-a:hover,.nav-active{color:#0f77ea;text-decoration: none;}
	/* 已登录、登录、注册 */
	.nav-logout{display:none;position: absolute;left:10px;padding:3px 0;border-radius: 0 0 10px 10px;background-color: #fff;}
	.nav-login,.nav-register{color:#333;padding:5px 0;}
	/* 聚焦、图标 */
	@keyframes aboutBreathe{ 0%,100%{right:30px; opacity:1;} 50%{right:50px; opacity:.8} }
	.nav-login-btns{position: absolute;top:68px;padding:6px 12px;background:#fff;font-size:12px;cursor:pointer;box-shadow: 0 1px 4px 0 rgba(0,0,0,.3);border-radius: 50%;animation: aboutBreathe 3s cubic-bezier(0.5,0,0.1,1) infinite;}
	.nav-login-btns a:hover{color:#0f77ea;}
	/* 移动导航 - 菜单按钮 */
	.navs .nav-moblie{display:none;}
	.mb-menu-btns{width:30px;position:relative;}
	.mb-menu-btn{position: absolute;top:15px;left:-30px;height:30px;width:40px;cursor:pointer;}
	.mb-menu-top,.mb-menu-middle,.mb-menu-bottom{position:absolute;left:10px;height:1px;width:20px;background-color:#333;}
	.mb-menu-close .mb-menu-top{top:9px;opacity: 1;}
	.mb-menu-close .mb-menu-middle{top:15px;transform: rotate(0deg);transition: transform .2s cubic-bezier(.73, 1, .28, .08);}
	.mb-menu-close .mb-menu-bottom{top:21px;transform: rotate(0deg);transition: transform .2s cubic-bezier(.73, 1, .28, .08);}
	.mb-menu-open .mb-menu-top{opacity: 0;}
	.mb-menu-open .mb-menu-middle{top:15px;transform: rotate(45deg);transition: transform .2s cubic-bezier(.73, 1, .28, .08);}
	.mb-menu-open .mb-menu-bottom{top:15px;transform: rotate(-45deg);transition: transform .2s cubic-bezier(.73, 1, .28, .08);}
	/* 移动端菜单 */
	.mbNavClose{display: none;transform: translateX(-65%);transition: all .5s ease-in;}
	.mbNavOpen{transform: translateX(0);animation: menuOpen .6s ease-in-out;}
	@-webkit-keyframes menuOpen{0%{transform: translateX(-100%);} 100%{transform: translateX(0%);}}
	/* 三维模块 */
	.wrap{position: absolute;top:100px;right: 20%;width:120px;height:200px;}
	.cube{width:120px;height:120px;margin:0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);animation: cubeRotate linear 20s infinite;position: relative;}
	.cube .cube-item{position: absolute;width:120px;height:120px;display: flex;align-items: center;justify-content: center;opacity: 0.68;transition: all .4s;}
	.picture{width:80px;height:80px;padding:20px;vertical-align: middle;font-size:28px;font-weight:bold;}
	.cube .cube-item:nth-child(1){transform: rotateY(0deg) translateZ(60px);}
	.cube .cube-item:nth-child(2){transform: rotateY(180deg) translateZ(60px);}
	.cube .cube-item:nth-child(3){transform: rotateY(-90deg) translateZ(60px);}
	.cube .cube-item:nth-child(4){transform: rotateY(90deg) translateZ(60px);}
	.cube .cube-item:nth-child(5){transform: rotateX(90deg) translateZ(60px);}
	.cube .cube-item:nth-child(6){transform: rotateX(-90deg) translateZ(60px);}	
	@-webkit-keyframes cubeRotate {
		to {transform: rotateX(0deg) rotateY(0deg)}
		from {transform: rotateX(360deg) rotateY(360deg)} 
	}
	@media only screen and (max-width:780px){
	  .navs .nav-normal{display:none;}
	  .navs .nav-moblie{display:block;}
	  .nav-item .mb-nav{display:block;width: 65%;height:calc(100vh - 60px);position:absolute;top: 0;left:0;z-index:-1;background: #fff;}
	  .mb-nav-a{display:block;height:48px;line-height:48px;padding-left:25px;color:#333;border-bottom:1px solid #787878;}
	  .mb-nav-a:hover{color: #000;background:#ddd;}
	}
</style>
